
 <!--
 * @Author: AFM (眼镜蛇)
 * @Date: 2023-10-19 16:51:47
 * @LastEditTime: 2023-10-19 16:51:47
 * @LastEditors: AFM (眼镜蛇)
 * @Description: APlayer组件化
-->
<template>
	<div ref="playerRef"></div>
	<div class="tipStyle">
		<a href="https://aplayer.js.org/#/zh-Hans/" target="_blank">aplayer</a><br />
		npm install aplayer --save <br />
		<strong>局部引用:</strong> <br />
		import APlayer from 'aplayer'; <br />
		import 'APlayer/dist/APlayer.min.css'; <br />
		import type { PropType } from '@vue/runtime-core';<br />
		<strong>.vue页面中使用</strong> <br />
		&lt;div ref="playerRef"&gt; &lt;div&gt;<br />
		我的实例引入资源使用的import引入的：<br />
		import imgpic from "../assets/img/logo.png"<br />
		import imgpic2 from "../assets/ht.jpg"<br />
		import imgmp3 from "../assets/pj.mp3"<br />
		import imgmp32 from "../assets/pj.mp3"<br />
		const playerRef = ref() <br />
		onMounted(() => { <br />
			nextTick(() => { <br />
				instance = new APlayer({ <br />
					<strong style="font-style: italic;">设置配置参数：</strong> <br />
					container: playerRef.value,  //播放器容器元素<br />
					fixed: props.fixed,  //开启吸底模式<br />
					mini: props.mini, //开启迷你模式<br />
					autoplay: props.autoplay, //音频自动播放<br />
					theme: props.theme, //主题色<br />
					loop: props.loop, //音频循环播放, 可选值: 'all', 'one', 'none'<br />
					order: props.order, //音频循环顺序, 可选值: 'list', 'random'<br />
					preload: props.preload, //预加载，可选值: 'none', 'metadata', 'auto'<br />
					volume: props.volume, //默认音量，请注意播放器会记忆用户设置，用户手动设置音量后默认音量即失效<br />
					mutex: props.mutex, //互斥，阻止多个播放器同时播放，当前播放器播放时暂停其他播放器<br />
					lrcType: props.lrcType, //传递歌词的方式有3种 3代表文件形式 1代表字符串形式 2代表HTML形式<br />
					listFolded: props.listFolded, //列表默认折叠<br />
					listMaxHeight: props.listMaxHeight, // 列表最大高度<br />
					storageName: props.storageName, // 存储播放器设置的 localStorage key 'aplayer-setting'<br />
					audio: [ //音频信息, 应该是一个对象或对象数组<br />
						{ <br />
							name: '鹿晗', //音频名称 <br />
							artist: '好个一起听', //音频艺术家<br />
							url: imgmp3, //音频链接<br />
							cover: imgpic, //音频封面<br />
							lrc: '[00:00.00][00:01.78]杨宗纬&张碧晨-凉凉[00:02.88]电视剧《三生三世十里桃花》片尾曲',  //歌词 <br />
							theme: '#ebd0c2'  //切换到此音频时的主题色，比上面的 theme 优先级高<br />
							type:"",  //可选值: 'auto', 'hls', 'normal' 或其他自定义类型 <br />
						}, <br />
						{ <br />
							name: '老张', <br />
							artist: '好个一', <br />
							url: imgmp32, <br />
							cover: imgpic2, <br />
							lrc: 'ss.lrc', <br />
							theme: '#ebd0c2' <br />
						} <br />
					] <br />
				}) <br />
			}) <br />
			// 销毁<br />
			onBeforeUnmount(() => {  <br />
				instance.destroy()  <br />
			})  <br />
		

	</div>
</template>
  
<script lang="ts" setup>
import APlayer from 'aplayer';
import 'APlayer/dist/APlayer.min.css';
import type { PropType } from '@vue/runtime-core';
import { nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
import imgpic from "../assets/img/logo.png"
import imgpic2 from "../assets/ht.jpg"
import imgmp3 from "../assets/pj.mp3"
import imgmp32 from "../assets/pj.mp3"
const playerRef = ref()
let instance: APlayer;
const props = defineProps({
	// 开启吸底模式
	fixed: {
		type: Boolean as PropType<boolean>,
		default: false
	},
	// 开启迷你模式
	mini: {
		type: Boolean as PropType<boolean>,
		default: false
	},
	// 音频自动播放
	autoplay: {
		type: Boolean as PropType<boolean>,
		default: false
	},
	// 主题色
	theme: {
		type: String as PropType<string>,
		default: 'rgba(255,255,255,0.2)'
	},
	// 音频循环播放
	loop: {
		type: String as PropType<'all' | 'one' | 'none'>,
		default: 'all'
	},
	// 音频循环顺序
	order: {
		type: String as PropType<'list' | 'random'>,
		default: 'random'
	},
	// 预加载
	preload: {
		type: String as PropType<'auto' | 'metadata' | 'none'>,
		default: 'auto'
	},
	// 默认音量
	volume: {
		type: Number as PropType<number>,
		default: 0.7,
		validator: (value: any) => {
			return value >= 0 && value <= 1;
		}
	},
	// 歌曲服务器(netease-网易云, tencent-qq音乐, kugou-酷狗, xiami-小米音乐, baidu-百度音乐)
	songServer: {
		type: String as PropType<'netease' | 'tencent' | 'kugou' | 'xiami' | 'baidu'>,
		default: 'kugou'
	},
	// 播放类型(song-歌曲, playlist-播放列表, album-专辑, search-搜索, artist-艺术家)
	songType: {
		type: String as PropType<string>,
		default: 'playlist'
	},
	// 歌的id
	songId: {
		type: String as PropType<string>,
		default: '19723756'
	},
	// 互斥，阻止多个播放器同时播放，当前播放器播放时暂停其他播放器
	mutex: {
		type: Boolean as PropType<boolean>,
		default: true
	},
	// 传递歌词方式
	lrcType: {
		type: Number as PropType<number>,
		default: 1
	},
	// 列表是否默认折叠
	listFolded: {
		type: Boolean as PropType<boolean>,
		default: true
	},
	// 列表最大高度
	listMaxHeight: {
		type: String as PropType<string>,
		default: '100px'
	},
	// 存储播放器设置的 localStorage key
	storageName: {
		type: String as PropType<string>,
		default: 'aplayer-setting'
	}
})
// 初始化
onMounted(() => {
	nextTick(() => {
		instance = new APlayer({
			container: playerRef.value,
			fixed: props.fixed,
			mini: props.mini,
			autoplay: props.autoplay,
			theme: props.theme,
			loop: props.loop,
			order: props.order,
			preload: props.preload,
			volume: props.volume,
			mutex: props.mutex,
			lrcType: props.lrcType,
			listFolded: props.listFolded,
			listMaxHeight: props.listMaxHeight,
			storageName: props.storageName,
			audio: [
				{
					name: '鹿晗',
					artist: '好个一起听',
					url: imgmp3,
					cover: imgpic,
					lrc: '[00:00.00][00:01.78]杨宗纬&张碧晨-凉凉[00:02.88]电视剧《三生三世十里桃花》片尾曲[00:04.04]作词：刘畅[00:05.30]作曲：谭旋[00:06.46]编曲：韦国赟[00:48.24]女：入夜渐微凉[00:51.47]繁花落地成霜[00:53.04]你在远方眺望[00:55.37]耗尽所有暮光[00:58.42]不思量自难相忘[01:09.55]男：夭夭桃花凉[01:11.53]前世你怎舍下[01:14.22]这一海心茫茫[01:17.11]还故作不痛不痒不牵强[01:24.47]都是假象[01:30.74]女：凉凉夜色为你思念成河[01:36.13]化作春泥呵护着我[01:41.45]男：浅浅岁月拂满爱人袖[01:46.00]片片芳菲入水流[01:52.35]女：凉凉天意潋滟一身花色[01:57.40]落入凡尘伤情着我[02:02.76]男：生劫易渡情劫难了[02:06.22]折旧的心还有几分前生的恨[02:13.63]还有几分[02:17.58]合：前生的恨[02:43.08]女：也曾鬓微霜[02:44.90]也曾因你回光[02:47.45]悠悠岁月漫长[02:50.17]怎能浪费时光[02:52.98]去流浪[02:54.27]男：去流浪[02:57.47]女：去换成长[03:04.24]男：灼灼桃花凉[03:06.24]今生愈渐滚烫[03:08.73]一朵已放心上[03:11.39]足够三生三世背影成双[03:16.51]女：背影成双[03:18.87]男：在水一方[03:25.34]女：凉凉夜色为你思念成河[03:30.84]化作春泥呵护着我[03:36.12]男：浅浅岁月拂满爱人袖[03:40.53]片片芳菲入水流[03:47.14]女：凉凉天意潋滟一身花色[03:52.13]落入凡尘伤情着我[03:57.43]男：生劫易渡情劫难了[04:01.36]折旧的心还有几分前生的恨[04:16.20]女：凉凉三生三世恍然如梦[04:21.36]须臾的年风干泪痕[04:26.66]男：若是回忆不能再相认[04:31.16]就让情分落九尘[04:37.58]女：凉凉十里何时还会春盛[04:42.79]又见树下一盏风存[04:48.11]男：落花有意流水无情[04:51.72]别让恩怨爱恨凉透那花的纯[05:01.69]合：吾生愿牵尘[05:14.78][05:16.25]我爱歌词网www.5ilrc.com[05:17.49]歌词编辑：黎起铮[05:18.77]QQ：20891372[05:20.14]',
					theme: '#ebd0c2'
				},
				{
					name: '老张',
					artist: '好个一',
					url: imgmp32,
					cover: imgpic2,
					lrc: 'ss.lrc',
					theme: '#ebd0c2'
				}
			]
		})
	})
})
// 销毁
onBeforeUnmount(() => {
	instance.destroy()
})
</script>